<template>
  <el-card class="box-card" style="margin: 20px">
    <el-row style="margin: 0">
      <el-col :span="16"><div class="grid-content bg-purple-light"><h3>2018年药学专业知识一考前冲刺班</h3></div></el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          <span>其他课程</span>
          <el-select v-model="value" placeholder="请选择" style="margin-left: 8px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-button type="primary" style="margin-bottom: 10px" size="medium">学习进度管理</el-button>
    <el-row>
      <el-col :span="9"><div class="grid-content bg-purple">开始日期 ：2018-09-11</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple">计划天数： 47天</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple">已学课程： 0.0小时</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple">通过练习： 0</div></el-col>

    </el-row>
    <el-row>
      <el-col :span="9">
        <div class="grid-content bg-purple-light">
          <span>结束日期：2018-09-11</span>
          <div style="display: inline-block;margin-left: 15px">
            <span>设置：</span>
            <el-date-picker
              v-model="value1"
              type="date"
              size="small"
              placeholder="选择日期结束日期"/>
          </div>
        </div>
      </el-col>
      <el-col :span="5"><div class="grid-content bg-purple-light">已学天数： 11天</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple-light">每日进度： 0.0小时/天</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple-light">每日进度： 0.0/天</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="9"><div class="grid-content bg-purple">课程总时长： 14.5小时</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple">剩余天数： 36天</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple">未学课程： 14.5小时</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple">未做练习： 18</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="9"><div class="grid-content bg-purple-light">课后练习总数： 18</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple-light">进度计划： 0.3小时/天</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple-light">进度计划： 0.4/天</div></el-col>
      <el-col :span="5"><div class="grid-content bg-purple-light"/></el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'Top',
  data() {
    return {
      value1: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '选项1'
    }
  }
}
</script>

<style scoped lang="scss">
  .el-row {
    margin-bottom: 20px;
    font-size: 14px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 0;
    line-height: 35px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #f9f9f9;
  }
  .bg-purple-light {
    background: #fff;
  }
  .grid-content {
    border-radius: 0px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
